import React, {Component} from 'react';
import Detail from "./Detail";
import {Link,Route} from "react-router-dom";

class Message extends Component {
    state={
        message:[
            {id:"01",message: "消息1"},
            {id:"02",message: "消息2"},
            {id:"03",message: "消息3"}
        ]
    }
    render() {
        return (
            <div>
                <div>
                    <ul>
                        {
                            this.state.message.map((item)=>{
                                return ( <li key={item.id}>
                                    <Link to={{pathname:'/home/message/detail',state:{id:item.id,message:item.message}}}>{item.message}</Link>&nbsp;&nbsp;
                                </li>)
                            })
                        }
                    </ul>
                </div>
               <Route path="/home/message/detail/" component={Detail}></Route>
            </div>
        );
    }
}

/*
  向路由组件传递参数
       1.params参数
         路由链按(携带参数):<Link to='/demo/test/tom/18'}>详情</Link>
         注册路由(声明按收):<Route path="/demo/test/:name/:age" component={Test}/>
         接收参数:this.props.match.params
       2.search参数
         路由链接(携带参数):<Link to='/demo/test?name=tom&age=18'}>详情</Link>
         注册路由(无需声明，正常注册即可):<Route path="/demo/test"component={Test}/>
         按收参数:this.props.location.search
         备注:获取到的search是urlencoded编码字符串，需要借助querystring解析
       3.state参数
         路由链接(携带参数):<Link to={{path:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
         注册路由(无需声明，正常注册即可):<Route path="/demo/test"component={Test}/>
         接收参数:this.props.location.state
         备注:刷新也可以保留住参数
*/

export default Message;